<template>
  <div>
    <Modal :value="visible" :title="title" width="800" footer-hide>
      <Form ref="formInline" :model="form" :rules="ruleInline">
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="name" label="商家姓名">
              <Input
                type="text"
                v-model="form.name"
                placeholder="请输入商家姓名"
              ></Input>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="wx" label="商家微信姓名">
              <Input
                type="text"
                v-model="form.wx"
                placeholder="请输入商家微信姓名"
              >
              </Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="tel" label="联系方式">
              <Input
                type="text"
                v-model="form.tel"
                placeholder="请输入联系方式"
              >
              </Input>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="id_card" label="身份证号">
              <Input
                type="text"
                v-model="form.id_card"
                placeholder="请输入身份证号"
              >
              </Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="blank_card" label="银行卡号">
              <Input
                type="text"
                v-model="form.blank_card"
                placeholder="请输入银行卡号"
              >
              </Input>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="provinces" label="省/市">
              <Cascader
                :data="provincesAndCity"
                v-model="form.provinces"
              ></Cascader>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="address" label="地址">
              <Input
                v-model="form.address"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入地址"
              ></Input>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="pro_address" label="生产地址">
              <Input
                v-model="form.pro_address"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入生产地址"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="log_address" label="发货地址">
              <Input
                v-model="form.log_address"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入发货地址"
              ></Input>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="other" label="其他信息">
              <Input
                v-model="form.other"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入其他信息"
              ></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="id_card_fa_fid" label="身份证正面">
              <Upload
                  :headers="headers"
                  :format="['jpg','jpeg','png']"
                  action="/api/file/upload"
                  :default-file-list="form.id_card_fa"
                  :on-preview="onPreview"
                  :on-success="(file) => handleSuccess(file, 'id_card_fa_fid')">
                <div class="upload_s">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="id_card_obv_fid" label="身份证反面">
              <Upload :headers="headers" :format="['jpg','jpeg','png']" action="/api/file/upload" :default-file-list="form.id_card_obv" :on-success="(file) => handleSuccess(file, 'id_card_obv_fid')">
                <div class="upload_s">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="cer_fa_fid" label="实时人脸照片">
              <Upload :headers="headers" :format="['jpg','jpeg','png']" action="/api/file/upload" :default-file-list="form.cer_fa" :on-success="(file) => handleSuccess(file, 'cer_fa_fid')">
                <div class="upload_s">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="cer_obv_fid" label="银行资信证明">
              <Upload :headers="headers" :format="['jpg','jpeg','png']" action="/api/file/upload" :default-file-list="form.cer_obv" :on-success="(file) => handleSuccess(file, 'cer_obv_fid')">
                <div class="upload_s">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Col :span="6">
            <Button type="primary" @click="submit" style="margin-right: 10px"
              >提交</Button
            >
            <Button @click="cancel">取消</Button>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { provincesAndCity } from '@/utils/provincesAndCity'
import { mapActions } from 'vuex'
export default {
  name: 'edit',
  data () {
    return {
      visible: false,
      title: '编辑审核信息',
      headers: {
        Authorization: window.localStorage.getItem('token'),
        AccessControlAllowOrigin: '*'
      },
      form: {
        name: '',
        wx: '',
        province: '',
        city: '',
        address: '',
        tel: '',
        blank_card: '',
        id_card: '',
        pro_address: '',
        log_address: '',
        id_card_fa_fid: '',
        id_card_obv_fid: '',
        cer_fa_fid: '',
        cer_obv_fid: '',
        other: null,
        provinces: [],
        id_card_fa: [],
        id_card_obv: [],
        cer_fa: [],
        cer_obv: []
      },
      ruleInline: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        tel: [{ required: true, message: '不能为空', trigger: 'blur' }],
        id_card: [{ required: true, message: '不能为空', trigger: 'blur' }],
        blank_card: [{ required: true, message: '不能为空', trigger: 'blur' }],
        provinces: [
          {
            required: true,
            type: 'array',
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        address: [{ required: true, message: '不能为空', trigger: 'blur' }],
        pro_address: [{ required: true, message: '不能为空', trigger: 'blur' }],
        log_address: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      provincesAndCity
    }
  },
  methods: {
    ...mapActions('shop', ['_editShop', '_getDetail']),
    init ({ index, row }) {
      if (index === 0) {
        this.title = '填写审核信息'
      } else {
        // console.log(row)
        this.getShopDetail(row.id)
        // this.form = Object.assign(this.form, row)
        // this.form.provinces = [row.province, row.city]
        // console.log(this.form)
        this.title = '编辑审核信息'
      }
      this.visible = true
    },
    getShopDetail (id) {
      const _this = this
      this._getDetail(id).then(res => {
        // console.log(res)
        _this.form = Object.assign(this.form, res)
        _this.form.provinces = [res.province, res.city]
      })
    },
    submit () {
      const _this = this
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          // console.log(this.form)
          const {
            id,
            name,
            wx,
            tel,
            id_card,
            blank_card,
            provinces,
            address,
            pro_address,
            log_address,
            other,
            id_card_fa_fid,
            id_card_obv_fid,
            cer_fa_fid,
            cer_obv_fid
          } = _this.form
          const data = {
            id,
            name,
            wx,
            tel,
            id_card,
            blank_card,
            province: provinces[0],
            city: provinces[1],
            address,
            pro_address,
            log_address,
            other,
            id_card_fa_fid,
            id_card_obv_fid,
            cer_fa_fid,
            cer_obv_fid
          }
          _this._editShop({ ...data }).then((res) => {
            _this.$Message.success('操作成功')
            _this.cancel()
          })
        }
      })
    },
    cancel () {
      this.visible = false
      this.$refs.formInline.resetFields()
    },
    handleSuccess (event, prop) {
      const { payload } = event
      this.form[prop] = payload.id
      // console.log(event, prop)
    },
    onPreview (e) {
      console.log(e)
    }
  }
}
</script>

<style scoped>
.upload_s {
  width: 58px;
  height:58px;
  line-height: 58px;
  border: 1px dashed #ccc;
  text-align: center;
  border-radius: 4px;
}
</style>
